<template>
  <div style="width: 100%;background-color: #F1F3F4;" v-loading="trackLoading">

    <el-row>
      <el-col :span="8" style="height: calc(100vh - 120px);margin-left:20px;background-color: white;overflow: auto">
        <div style="margin-top: 10px;margin-left: 10px;margin-right: 10px">

          <div style="width: calc(100% - 20px)" v-for="item in trackLog">
            <div style="margin-top: 5px">
              <span style="color: #0960bd;font-size: 18px"><strong>{{ item.operateTypeName }}</strong></span>
              <span
                  style="color: #606266;font-size: 14px;float: right">{{ item.createTime }}  &nbsp;&nbsp;&nbsp; </span>
            </div>
            <div style="margin-top: 5px">
              <span style="color: dimgray;margin-top: 10px"> {{ item.logContent }} </span>
            </div>
            <div style="margin-top: 10px">
              <span style="color: dimgray;">操作人: {{ item.operateUserName }} </span>
              <span style="color: #346789;float: right"><strong>{{ item.nodeName }}</strong> </span>
            </div>
            <div style="height: 2px;background-color:#F1F3F4;margin-top: 5px"></div>
          </div>
          <br/> <br/> <br/>

        </div>
      </el-col>

      <el-col :span="15" style="height: calc(100vh - 120px);margin-left:10px; background-color: white">
        <div style="margin-top: 10px;margin-left: 10px;margin-right: 10px">
          <ShowEditor ref="showEditor"/>
        </div>
      </el-col>
    </el-row>
  </div>
</template>

<script>
import {queryProcessLog} from '@/api/workflowInstance'
import {getTraceList} from '@/api/workflowTask'

import ShowEditor from '../processEditor/ShowEditor.vue'

export default {
  components: {
    ShowEditor
  },
  data() {
    return {
      trackLoading:false,
      workflowDetail: {},
      loading: false,
      trackLog: [],
      antDesign: {},
      workflowTrack: {},

    }
  },
  created() {
  },
  methods: {
    showProcess(row) {
      this.trackLoading = true;
      this.loading = true;
      this.workflowDetail = row;
      this.queryProcessLogList();
      this.queryTraceList();
    },

    async queryProcessLogList() {
      let ret = await queryProcessLog({processInstanceId: this.workflowDetail.processInstanceId});
      this.trackLog = ret.data;
    },
    async queryTraceList() {
      let ret = await getTraceList({
        processInstanceId: this.workflowDetail.processInstanceId,
        processId: this.workflowDetail.details.processId
      });
      this.workflowTrack = ret.data;
      this.antDesign = ret.data.design;
      this.$refs.showEditor.showEditor(this.workflowTrack)
      this.trackLoading = false;
    },

  },

}
</script>


<style src="../../css/index.scss" lang="scss"></style>
<style lang="scss" scoped>
.search-item {
  float: left;
  margin: 0 20px 20px 0;

  span {
    color: #606266;
    font-size: 14px;
    margin-right: 0px;
  }
}

.workProcessClass {
  height: 500px;
  overflow: auto;
  border: 1px solid #ebeef5;
  border-radius: 4px;
  background: white;
}
</style>
